<template>
  <div class="page-content">
    <!-- 表格顶部区域 -->
    <TableBar
      :columns="columns"
      @changeColumn="
        (newcolumns) => {
          this.columns = newcolumns;
        }
      "
      :layout="layout"
    >
      <div slot="bottom">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-button type="primary" plain size="mini" @click="dialog"
              >添加类型</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button
              type="danger"
              plain
              size="mini"
              @click="delByBatch"
              :disabled="selectRows.length === 0"
              >批量删除</el-button
            >
          </el-col>
        </el-row>
      </div>
    </TableBar>
    <!-- 表格区域 -->
    <TheTable
      :data="allList"
      :showPage="false"
      @selectData="
        (selectRows) => {
          this.selectRows = selectRows;
        }
      "
      :Bottom="35"
    >
      <div class="item" effect="dark" placement="top-start">
        <el-table-column
          type="selection"
          width="35"
          fixed="left"
        ></el-table-column>
      </div>
      <div
        v-for="item in columns"
        :key="item.id"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          v-if="item.show"
          :label="item.name"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            mini
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="dialog(scope.row)"
          ></el-button>
          <el-button
            mini
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delInfo(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </TheTable>
    <!-- 对话框区域 -->
    <el-dialog
      :title="dialogTitle"
      width="30%"
      :visible.sync="showDialog"
      top="20vh"
      @close="
        () => {
          this.showDialog = false;
          this.form = {};
        }
      "
    >
      <el-form
        label-position="right"
        ref="formRef"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <FormRow :form="form" :label-prop="formRowColumns" num="1"></FormRow>
        <el-form-item size="large" class="dialog-bottom-btn">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllInfo,
  addInfo,
  delInfoById,
  delInfoByIds,
  editInfo,
} from "../../../Api/rightsmanage/file_manage";
import FormRow from "../../OrderManagement/FormRow";

export default {
    components: {
    FormRow,
  },
  data() {
    return {
      allList: [],
      columns: [
        // 表头数据
        { name: "id", show: true, prop: "id" },
        { name: "名称", show: true, prop: "name" },
      ],
      layout: "refresh, column",
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: `请输入类型名称`,
            trigger: "blur",
          },
        ],
      },

      selectRows: [],
      dialogTitle: "增加",
      showDialog: false,
    };
  },
  computed: {
    // 批量删除的ID集合
    ids() {
      //   console.log("this.selectRows: ", this.selectRows);
      return this.selectRows.map((row) => row.id);
    },
    // 过滤掉发送请求时才加的表单字段
    formRowColumns() {
      const noArr = ["id"];
      return this.columns.filter((item) => {
        return !noArr.includes(item.prop);
      });
    },
  },
  methods: {
    // 获取数据
    async setAllList() {
      const { data: res } = await getAllInfo();
      if (res.statusCode !== 20000) {
        console.error(res.message);
      }
      this.allList = res.data;
    },
    // 打开弹窗
    dialog(row = undefined) {
      row instanceof Event ? (row = {}) : "";
      console.log("row: ", row);
      let form = JSON.parse(JSON.stringify(row));
      console.log("form: ", form);
      if (row.id) {
        // 修改
        this.form = form;
        this.dialogTitle = "修改";
      } else {
        // 增加
        this.dialogTitle = "新增";
      }
      this.showDialog = true;
    },
    // 提交按钮
    async submit() {
      this.$refs.formRef.validate(async (access, obj) => {
        if (access) {
          let res;
          if (!this.form.id) {
            // 增加
            res = await addInfo(this.form.name);
          } else {
            // 修改
            res = await editInfo(this.form);
          }
          res = res.data;
          if (res.statusCode !== 20000) {
            console.error(res.message);
            this.$message.error(res.message);
          } else {
            this.showDialog = false;
            this.$message.success(res.message);
            this.setAllList();
          }
        }
      });
    },
    // 修改按钮
    async editInfo(row) {
      const { data: res } = await editInfo(row);
      if (res.statusCode !== 20000) {
        console.error(res.message);
        this.$message.error(res.message);
      } else {
        this.$message.success(res.message);
      }
    },
    // 单行删除按钮
    async delInfo(id) {
      this.$confirm("此操作将永久删除该类型，请谨慎操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await delInfoById(id);
          if (res.statusCode !== 20000) {
            this.$message.error(res.message);
          } else {
            this.$message.success(res.message);
            this.setAllList();
          }
        })
        .catch(() => {
          return this.$message.info("已取消删除！");
        });
    },
    // 批量删除按钮
    async delByBatch() {
      console.log(this.ids);
      this.$confirm("此操作将永久删除这些信息，请谨慎操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await delInfoByIds(this.ids);
          if (res.statusCode !== 20000) {
            this.$message.error(res.message);
          } else {
            this.$message.success(res.message);
            this.setAllList();
          }
        })
        .catch(() => {
          return this.$message.info("已取消删除！");
        });
    },
  },
  created() {
      this.setAllList();
  },
};
</script>
<style lang="scss" scoped>
</style>